import { useState, useEffect } from "react";
import { Form, Select, Alert, Tooltip, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { fmcgpurchasesAppointReceivingClerk, queryTakeUserList } from "../service";
import { isEmpty } from "lodash";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";

const PickAssignmentModal = ({ visible, checkedRows, handleCancel, fetchList }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [codesArrayNum, setCodesArrayNum] = useState(false); //去支付弹窗
	const [userData, setUserData] = useState([]); // 拿货员列表

	const handleUserList = async username => {
		const { data, success } = await queryTakeUserList({
			current: 1,
			size: 2000,
			businessType: 3,
			forbidMenulds: "",
			username: ""
		});
		if (success) {
			setUserData(data);
		}
	};
	const renderSubUser = item => {
		if (item.name) {
			if (item.account) {
				return item.name + "(" + item.account + ")";
			} else {
				return item.name;
			}
		} else {
			return "";
		}
	};
	const optionUserList =
		!isEmpty(userData) &&
		userData.map(item => (
			<Option key={item.id}>
				<Tooltip title={renderSubUser(item)}>{renderSubUser(item)}</Tooltip>
			</Option>
		));

	useEffect(() => {
		handleUserList();
		console.log(checkedRows, "checkedRows");
		const codesArray = checkedRows.map(item => item.code);
		console.log(codesArray, "codesArray");
		setCodesArrayNum(codesArray);
		if (visible) {
			form.resetFields();
		}
	}, [visible]);

	const onOk = () => {
		form.validateFields().then(async value => {
			const { success } = await fmcgpurchasesAppointReceivingClerk({
				pickerId: value.pickerId,
				uniqueCode: codesArrayNum,
				type: value.type
			});
			if (success) {
				message.success("操作成功");
				onCancel();
				fetchList();
			}
			setLoading(false);
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal title={{ title: "拿货指派" }} visible={true} onOk={onOk} onCancel={onCancel} width="553px" minHeight="150px">
			<Alert showIcon message={<Typography as="s1">注：针对拿货中的拿货任务重新指派将不会生效</Typography>} />
			<SubTitle symbol as="s2" title="指派详情" wrapStyle={{ marginBottom: 16, marginTop: 20 }} />
			<Form form={form} name="mark-unuaual-modal" style={{ marginTop: "12px" }}>
				<Form.Item
					label="指派逻辑："
					name="type"
					rules={[{ required: true, message: "请选择拿货逻辑" }]}
					labelCol={{
						span: 4
					}}
				>
					<Select placeholder="请选择拿货逻辑">
						<Option value="0">当前选中唯一码</Option>
						<Option value="1">当前关联的订单下拿货任务</Option>
						<Option value="2">相同商品编码的所有拿货任务</Option>
					</Select>
				</Form.Item>
				<Form.Item
					label="拿货员："
					name="pickerId"
					rules={[{ required: true, message: "请选择拿货员" }]}
					labelCol={{
						span: 4
					}}
				>
					<Select
						showSearch
						placeholder="请选择拿货员"
						filterOption={(input, option) => {
							return option.children.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
						}}
						allowClear
					>
						{optionUserList}
					</Select>
				</Form.Item>
			</Form>
		</CommonModal>
	);
};

export default PickAssignmentModal;
